<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--    <script src="${pageContext.request.contextPath}/js/DatePicker.js"></script>-->
    <!-- 工具 -->
    <script src="js/HttpUtil.js"></script>
    <title>商品列表</title>

</head>
<body>
<div class="row" style="width:98%;margin-left: 1%;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                会员列表
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <div class="form-group form-inline">
                            <span>商品名称</span>
                            <input type="text" id="goodsName" name="name" class="form-control">
                        </div>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <div class="form-group form-inline">
                            <span>所属种类</span>
                            <select name="goodsParent"  id="sel_type">
                                <option value="0">--请选择--</option>
                                <span></span>
                            </select>

                            <!--                            <span>上架时间</span>-->
<!--                            <input type="text" readonly="readonly"  name="pubdate" class="form-control" onclick="setday(this)">-->
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                        <button type="button" onclick="goodsSeek()" class="btn btn-primary" id="search"><span class="glyphicon glyphicon-search"></span></button>
                    </div>
                </div>
                <div style="overflow: scroll ;height: 600px;">
                    <table id="tb" class="table table-striped table-hover table-bordered">
                        <tr>
                            <td>序号</td>
                            <td>商品名称</td>
                            <td>商品分类</td>
                            <td>价格</td>
                            <td>评分</td>
                            <td>描述</td>
<!--                            <td>上架时间</td>-->
                            <td>删除</td>
                            <td>修改</td>
                        </tr>
                        <tbody id="tb_list" class="table table-striped table-hover table-bordered">

                        </tbody>
                    </table>
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                </div>
                                <div class="modal-body">
                                    <table id="tb_up">
                                    </table>
                                </div>
                                <div class="modal-footer">
                                    <a class="btn btn-default" data-dismiss="modal">取消</a>
                                    <a class="btn btn-primary" data-dismiss="modal" onclick="upUser()">修改</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
<script>
    var typeList;
    $(document).ready(function(){
        // loadGoods();
        loadType();
    });
    function loadType(){
        //ajax 请求后台
        var url="adminType/select";
        url=appendHost(url);
        $.ajax({
            url:url,
            method:"post",
            success:function (resp) {
                handleResp(resp,function (res) {
                    typeList=res;
                    console.log("showGoodsType")
                    console.log(res);
                    var pp=`<option value="0">--请选择--</option>`;
                    var html = res.map(function (g) {
                        var template =
                            `<option value="${g.id}">- ${g.typeName} -</option>`;
                        return template
                    }).join("");
                    $("#sel_type").html(pp+html);
                    goodsSeek();
                });
            },
            error:function(XMLHttpRequest,textStatus,errorThrown){
                alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
            }
        });
    }
    //请求商品信息
    // function loadGoods(res2){
    //     //ajax 请求后台
    //     $.ajax({
    //         url:"http://localhost:8080/shop_api/adminGoods/select",
    //         method:"post",
    //         success:function (resp2) {
    //             handleResp(resp2,function (res) {
    //                 console.log("showGoodsType222")
    //                 console.log(res2);
    //                 var html = res.map(function (s) {
    //                     let type;
    //                     for (let i=0;i<res2.length;i++){
    //                         if (res2[i].id==s.typeId){
    //                             type=res2[i].typeName;
    //                         }
    //                     }
    //                     var template =
    //                         `<tr class="tr_head">
    //                         <td>${s.id}</td>
    //                         <td>${s.goodsName}</td>
    //                         <td>${type}</td>
    //                         <td>${s.price}</td>
    //                         <td>${s.grade}</td>
    //                         <td>${s.info}</td>
    //                         <td><button class="btn btn-warning" onclick="delGoods(${s.id})">删除</button></td>
    //                         <td>
    //                         <button class="btn btn-primary" data-toggle="modal" onclick="selectByIdUser(${s.id})" data-target="#myModal">
    //                         修改</button>
    //                         </td>
    //                         </tr>`;
    //                     return template
    //                 }).join("");
    //                 $("#tb_list").html(html);
    //             });
    //         },
    //         error:function(XMLHttpRequest,textStatus,errorThrown){
    //             alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
    //         }
    //     });
    // }
    //通过ID查询用户信息
    function selectByIdUser(id) {
        let url = "adminGoods/selectById";
        let params = {id:id};
        // let pJson=JSON.stringify(params);
        console.log(id);
        httpGet(url, params, function (res) {
            console.log("showGoodsType")
            console.log(res);
            var template =
                `<tr><td>编号:</td><td id="id">${res.id}</td></tr>
                     <tr><td>商品名:</td><td><input id="username" type="text" value="${res.goodsName}"></td></tr>
<!--                     <tr><td>密码</td><td><input type="text" value="${res.typeId}"></td></tr>-->
                     <tr><td>商品类型:</td><td><input type="text" value="${res.typeId}"></td></tr>
                     <tr><td>价格:</td><td><input type="text" value="${res.price}"></td></tr>
<!--                     <tr><td>照片:(0女/1男)</td><td><input type="text" value="${res.imageUrl}"></td></tr>-->
                     <tr><td>评价:</td><td><input type="text" value="${res.grade}"></td></tr>
                     <tr><td>描述:</td><td><input type="text" value="${res.info}"></td></tr>
<!--                     <tr><td>假删除:(0不显示，1显示)</td><td><input type="text" value="${res.fakeState}"></td></tr>-->`;
            $("#tb_up").html(template);
        });
    }
    //修改用户
    function upUser() {
        if (confirm("确认要修改吗?")) {
            let url = "adminGoods/update";
            let params = {
                id:$("#tb_up").find('tr:eq(0)').children('td:eq(1)').text(),
                goodsName:$("#tb_up").find('tr:eq(1)').find("input").val(),
                typeId:$("#tb_up").find('tr:eq(2)').find("input").val(),
                price:$("#tb_up").find('tr:eq(3)').find("input").val(),
                grade:$("#tb_up").find('tr:eq(4)').find("input").val(),
                info:$("#tb_up").find('tr:eq(5)').find("input").val()
            };
            console.log(params);
            httpPost(url, params, function () {
                goodsSeek();
            });
        }
    }
    //删除商品分类
    function delGoods(id) {
        if (confirm("确认要删除吗?")) {
            let url = "adminGoods/delete";
            let params = {id:id};
            console.log(params);
            httpGet(url, params, function () {
                goodsSeek();
            });
        }
    }
    //高级搜索
    function goodsSeek(){
        let url="adminGoods/goodsSeek";
        let params={
            goodsName: $("#goodsName").val(),
            typeId: $("#sel_type").val()
        }
        console.log(typeList);
        // loadGoods(typeList);
        httpPost(url,params,function (res) {
            console.log("222")
            console.log(res);
            var html = res.map(function (s) {
                let type;
                for (let i=0;i<typeList.length;i++){
                    if (typeList[i].id==s.typeId){
                        type=typeList[i].typeName;
                    }
                }
                var template =
                    `<tr class="tr_head">
                            <td>${s.id}</td>
                            <td>${s.goodsName}</td>
                            <td>${type}</td>
                            <td>${s.price}</td>
                            <td>${s.grade}</td>
                            <td>${s.info}</td>
                            <td><button class="btn btn-warning" onclick="delGoods(${s.id})">删除</button></td>
                            <td>
                            <button class="btn btn-primary" data-toggle="modal" onclick="selectByIdUser(${s.id})" data-target="#myModal">
                            修改</button>
                            </td>
                            </tr>`;
                return template
            }).join("");
            $("#tb_list").html(html);

        })
    }
</script>
</body>
</html>